<template>
  <div class="login-container">
    <div class="content-container">
      <div class="login-left"></div>
      <div class="login-right">
        <transition name="el-zoom-in-center" mode="out-in">
          <component
            :is="isLogin ? Login : Registered"
            @changeState="handleChangeState"
          />
        </transition>
      </div>
      <div class="right-light"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Login from "./login.vue";
import Registered from "./registered.vue";
const isLogin = ref(true);
const handleChangeState = (state) => {
  isLogin.value = state;
};
</script>
<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #7db4ff, #5689fe);
  overflow: hidden;
  position: relative;
  .content-container {
    position: relative;
    width: 60%;
    height: 60%;
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    .login-left {
      width: 50%;
      height: 100%;
      background: url("../../assets/image/bg-left.png") center no-repeat;
      background-size: 100% 100%;
    }
    .login-right {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: start;
      padding: 36px;
      color: #5794ff;
      .title {
        margin-top: 20px;
        margin-bottom: 0px;
      }
      .sub-title {
        margin-top: 10px;
        color: #9289a6;
        font-weight: 400;
      }
    }
    .right-light {
      width: 31px;
      height: 104px;
      background: url("../../assets/image/login-right.png") center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: 5%;
      top: -2px;
    }
  }
}
</style>
